Ext.onReady(function() {
	var TYPE_VIEW = '1';
	var LIST_VIEW = '2';
	var typeStore = Ext.create('Ext.data.Store', {
				fields : ['display', 'value'],
				data : [{
							"display" : "视图",
							"value" : TYPE_VIEW
						}, {
							"display" : "列表",
							"value" : LIST_VIEW
						}]
			});

	var selectObject = Ext.create('Ext.form.ComboBox', {
				fieldLabel : '选择对象',
				labelWidth: 60,
				id : 'select_object',
				store : typeStore,
				editable : false,
				queryMode : 'local',
				displayField : 'display',
				valueField : 'value',
				listeners : {
					afterRender : function(combo) {
						var firstValue = combo.getStore().first().get("value");
						combo.setValue(firstValue);
					},
					change: function(self, newValue, oldValue){
						if(newValue == TYPE_VIEW){
							grid.hide();
							flightView.show();
						}
						else if(newValue == LIST_VIEW){
							flightView.hide();
							grid.show();
						}
					}
				}
			});
			var search = function(){
				var store = null;
				var selectObject = Ext.getCmp("select_object").getValue();
				if( selectObject == TYPE_VIEW){
					store = Ext.getCmp("device_view").getStore();
				}
				else if(selectObject == LIST_VIEW){
					store = Ext.getCmp("device_grid").getStore();
				}
				
				store.clearFilter(true);
				store.filter("TdCode", Ext.getCmp("search_no").getValue());
			}
	
			var toolbar = Ext.create('Ext.toolbar.Toolbar', {
						dock : 'top',
						height: 40,
						items : [selectObject, {
									xtype : 'textfield',
									id: "search_no",
									labelWidth:60,
									fieldLabel : '二维码',
									enableKeyEvents: true,
									listeners:{
										keyup : function( self, e, eOpts ){
											if(e.getKey() == 13){
												self.selectText();
												search();
											}
										}
									}
								},{
									xtype: 'button',
									text: '清除',
									listeners:{
										click: function(){
											Ext.getCmp("search_no").setValue('');
											search();
										}
									}
								}, {
									xtype : 'button',
									text : '搜索',
									listeners:{
										click: function(){
											search();
										}
									}
								}]

					});
			var store = Ext.create('Ext.data.Store', {
				fields : ['Id', 'TdCode', 'No', 'ImgPath', {
							name : "Type",
							type : 'object'
						}, "Brand", "Manufacturers", "Model", {
							name : "OperationTime",
							type : 'date'
						}, {
							name : "CurrentStatus",
							type : "object"
						}, 'TdCode'],
				pageSize: 25,
				autoLoad : true,
				proxy : {
					type : 'ajax',
					url : '/device/all',
					reader : {
						type : 'json',
						root : 'data.rows',
						totalProperty: 'data.total'
					}
				}
			});

			var grid = Ext.create('Ext.grid.Panel', {
						id : "device_grid",
						hidden:true,
						store:store,
						margin : '5 5',
						columns : [{
									text : '序号',
									xtype : 'rownumberer',
									width : 40,
									sortable : false
								}, {
									text: '二维码',
									flex: 1,
									dataIndex: 'TdCode'
								}, {
									text : '设备编号',
									flex : 1,
									dataIndex : 'No'
								}, {
									text : '设备类型',
									flex : 1,
									dataIndex : 'Type',
									renderer : function(v) {
										return v.Name;
									}
								}, {
									text : '设备品牌',
									flex : 1,
									dataIndex : 'Brand'
								}, {
									text : '设备厂家',
									flex : 1,
									dataIndex : 'Manufacturers'
								}, {
									text : '设备型号',
									flex : 1,
									dataIndex : 'Model'
								}, {
									text : '投运时间',
									flex : 1,
									dataIndex : 'OperationTime',
									renderer : function(v) {
										return Ext.Date.format(v, "Y-m-d");
									}
								}, {
									text : '设备状态',
									flex : 1,
									dataIndex : 'CurrentStatus',
									renderer : function(v) {
										if (v.Id == 1) {
											return '<span style="color:green">'
													+ v.Name + '</span>';
										} else if (v.Id == 2) {
											return '<span style="color:#FFAA00">'
													+ v.Name + '</span>';
										} else {
											return '<span style="color:red">'
													+ v.Name + '</span>';
										}
									}
								}],
								bbar : Ext.create('Ext.PagingToolbar', {
									store : store,
									border: false,
									displayInfo : true,
									displayMsg : '显示{0} - {1} / 总数 {2}',
									emptyMsg : "没数据"
								})
					});


		var itemTpl = new Ext.XTemplate(
		    '<tpl for=".">',
		        '<div style="float:left;width:200px;" class="flight_item">',
		          '<img src="{ImgPath}" style="width:180px;height:180px;margin-top:5px;"/>',
		          '<div>编号:{No}  状态:',
		          '<span style="color:',
		          '<tpl if="CurrentStatus.Id == 1">green</tpl>', 
		          '<tpl if="CurrentStatus.Id == 2">#FFAA00</tpl>',
		          '<tpl if="CurrentStatus.Id == 3">red</tpl>',
		          '">{CurrentStatus.Name}</span>',
		          '</div>',
		          '<div>二维码：{TdCode}</div>',
		        '</div>',
		    '</tpl>'
		);
		
		var flightStore = Ext.create('Ext.data.Store', {
				fields : ['Id', 'TdCode', 'No', 'ImgPath', {
							name : "Type",
							type : 'object'
						}, "Brand", "Manufacturers", "Model", {
							name : "OperationTime",
							type : 'date'
						}, {
							name : "CurrentStatus",
							type : "object"
						}],

				autoLoad : true,
				proxy : {
					type : 'ajax',
					url : '/device/list_flight',
					reader : {
						type : 'json',
						root : 'data.rows'
					}
				}
			});

		var flightView = Ext.create('Ext.view.View', {
		    store: flightStore,
		    id: 'device_view',
		    margin: '5 5',
		    tpl: itemTpl,
		    itemSelector: 'div.flight_item',
		    overItemCls: 'flight_item_over',
		    selectedItemCls: 'flight_item_selected',
		    emptyText: '没数据',
		    listeners: {
		    	itemclick : function( self, record, item, index, e, eOpts ){
		    		location.href = 'device/detail/' + record.get("Id") + '?qry=true';
		    	}
		    }
		});
			var panel = Ext.create("Ext.panel.Panel", {
						border : false,
						bodyBorder : false,
						autoScroll:true,
						layout: 'fit',
						dockedItems : [toolbar],
						items : [grid, flightView]
					});
			Ext.create('Ext.Viewport', {
						layout : 'fit',
						style : 'background:none;background-color:white;',
						items : [panel]
					});
		});